<script setup lang="ts">
// import { RouterLink, RouterView } from 'vue-router'
import { getTq } from "../api/index";
import { ref } from "vue";
const data = ref({});
getTq({
  unescape: 1,
  version: "v61",
  appid: "83693968",
  appsecret: "7xnYHdFp",
}).then((res) => {
  console.log(res);
  data.value = res.data;
});
</script>

<template>
  <div class="header-a">
    <div class="a1">环境监测……</div>
    <div class="header-body">
      <div class="header-body-1">
        <div style="display: flex;">
          <div style="font-size: 0.2rem;margin-top: 0.09rem;">{{ data.air_pm25 }}</div>
          <img
            style="width: 0.3rem; margin-left: 0.03rem;"
            src="../assets/images/摄氏度.png"
            alt=""
          />
        </div>
        <div>
          <div
            style="
              width: 0.02rem;
              height: 0.1rem;
              background-color: skyblue;
              margin-left: 0.3rem;
              margin-top: 0.08rem;
            "
          ></div>
          <div style="margin-left: 0.3rem; margin-top: 0.03rem">
            {{ data.air_pm25 }}
            <img
              style="width: 0.2rem;height:0.2rem; margin-left: 0.02rem"
              src="../assets/images/摄氏度.png"
              alt=""
            />
          </div>
        </div>
        <div style="margin-left: 0.4rem">
          <div style="display: flex">
            <div class="yuan"></div>
            <div style="margin-left: 0.1rem; margin-top: 0.13rem">高温黄色预警</div>
          </div>
        </div>
      </div>
      <div class="b1">
        <div>
          <div
            style="
              display: flex;
              border-bottom: 1px solid #ccc;
              width: 1.5rem;
              height: 0.25rem;
              margin-left: 0.4rem;
            "
          >
           <div>
            <img
              src="../assets/images/tiganwendu.png"
              style="height: 0.2rem; margin-top: 0.01rem"
            />
           </div>
            <div style="margin-top: 0.01rem;width:3.1rem;line-height: 0.25rem;">体感</div>
            <div
              style="
                width: 0.7rem;
                height: 0.2rem;
                margin-left: 0.5rem;
                margin-top: 0.08rem;
              "
            >
              {{ data.air_level }}
            </div>
          </div>
          <div
            style="
               display: flex;
              border-bottom: 1px solid #ccc;
              width: 1.5rem;
              height: 0.25rem;
              margin-left: 0.4rem;
            "
          >
            <img
              src="../assets/images/tiganwendu.png"
              style="height: 0.2rem; margin-top: 0.01rem"
            />
            <div style="margin-top: 0.01rem;width:3.1rem;line-height: 0.25rem;">风力</div>
            <div
              style="
                 width: 0.7rem;
                height: 0.2rem;
                margin-left: 0.5rem;
                margin-top: 0.08rem;
              "
            >
              {{ data.air }}
            </div>
          </div>
          <div
            style="
               display: flex;
              border-bottom: 1px solid #ccc;
              width: 1.5rem;
              height: 0.25rem;
              margin-left: 0.4rem;
            "
          >
            <img
              src="../assets/images/用水量.png"
              style="height: 0.2rem; margin-top: 0.01rem"
            />
            <div style="margin-top: 0.01rem;width:3.1rem;line-height: 0.25rem;">湿度</div>
            <div
              style="
                 width: 0.7rem;
                height: 0.2rem;
                margin-left: 0.5rem;
                margin-top: 0.08rem;
              "
            >
              {{ data.air_pm25 }}
            </div>
          </div>
        </div>
      </div>
      <div class="b2">
        <div style="display: flex">
          <div class="b3">
            <div style="margin-left: 0.4rem; margin-top: 0.04rem">
              {{ data.air_pm25 }}
              <img
                style="width: 0.1rem; margin-left: 0.03rem"
                src="../assets/images/摄氏度.png"
                alt=""
              />
            </div>
            <div class="bb">
              <div class="b4">
                <div style="margin-left: 0.1rem; margin-top: 0.01rem">今天</div>
                <div class="chang"></div>
                <div style="margin-left: 0.02rem;">晴</div>
              </div>
            </div>
          </div>
          <div class="b6">
            <div style="margin-left: 0.4rem; margin-top: 0.04rem">
              {{ data.air_pm25 }}
              <img
                style="width: 0.1rem; margin-left: 0.03rem"
                src="../assets/images/摄氏度.png"
                alt=""
              />
            </div>
            <div class="bb">
                <div class="b4">
                <div style="margin-left: 0.1rem; margin-top: 0.01rem">明天</div>
                <div class="chang"></div>
                <div style="margin-left: 0.02rem;">晴</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

.a1 {
  width: 90%;
  height: 0.2rem;
  background: url("../assets/images/titlebg.png") no-repeat 0 0 / 100% 100%;
  color: #fff;
  padding-left: 0.1rem;
  line-height: 0.2rem;
}
.header-body-1 {
  display: flex;
}
.yuan {
  width: 0.09rem;
  height: 0.09rem;
  border-radius: 50%;
  background-color: orange;
  margin-top: 0.15rem;
}
.header-body {
  width: 100%;
  height: 3rem;
  color: #fff;
}
.bb {
  display: flex;
  width: 90%;
}
.b1 {
  width: 90%;
  height: 1rem;
  border: 1px solid #ccc;
  margin-left: 0.1rem;
}
.b2 {
  width: 90%;
  height: 0.5rem;
  border: 1px solid #ccc;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
}
.b3 {
  width: 45%;
  height: 0.4rem;
  border-right: 0.02rem solid #ccc;
  margin-top: 0.01rem;
}
.b6 {
  width: 45%;
  height: 0.4rem;
  margin-top: 0.01rem;
  margin-left: 0.1rem;
}
.b4 {
  display: flex;
  margin-top: 0.04rem;
}
.chang {
  width: 0.4rem;
  height: 0.1rem;
  margin-top: 0.01rem;
  margin-left: 0.02rem;
  background-color: rgb(4, 179, 4);
  border-radius: 5rem;
}
</style>